การแสดงผลแบบตาราง ด้วย DIV และ CSS อาจเป็นเรื่องยุ่งยากสำหรับมือใหม่ที่ต้องการออกแบบ แบบ tableless (ไม่ใช้ตาราง) และอาจมีข้อจำกัดมากพอสมควรนะครับ เนื่องจาก table นั้นจะแสดงผลได้ยืดหยุ่นกว่า โดยเฉพาะ กับข้อมูลที่ควบคุมไม่ได้

หลักการจริงๆของการแสดงผลแบบตารางด้วย DIV และ CSS ก็คือการกำหนดขนาดที่แน่นอนครับ

<div id="table">
    <p><span class="col1">1,1</span><span class="col2">1,2</span><span class="col3">1,3</span></p>
    <p><span class="col1">2,1</span><span class="col2">2,2</span><span class="col3">2,3</span></p>
</div>

div ก็คือ ขอบเขตของตาราง กำหนด css ไปที่ #table
p แทน แถวแต่ละแถว
span แทนแต่ละคอลัมน์ กำหนด css ด้วย .col1,.col2,.col3 ซึ่งแต่ละคอลัมน์อาจมีขนาดแตกต่างกันตามที่กำหนดใน CSS

  #table {
      width: 406px; /* col1 + col2 + col3 + padding + border */
      border-top: 4px solid #e3e7e7; /* เส้นกรอบด้านบน */
      background-color: #FFF; /* สีพื้นของตาราง */
  }
  #table p {
      clear: both;
      width: 100%;
      margin: 0;
  }
  #table span {
      float: left;
      padding: 0 10px; /* padding ของแต่ละคอลัมน์ */
      border-left: 1px solid #e3e7e7; /* เส้นกรอบด้านซ้ายของแต่ละเซล */
      border-bottom: 1px solid #e3e7e7; /* เส้นกรอบด้านล่างของแต่ละเซล */
  }
  #table span.col1 {
      width: 110px; /* ความกว้างของคอลัมน์ 1 */
  }
  #table span.col2 {
      width: 186px; /* ความกว้างของคอลัมน์ 2 */
  }
  #table span.col3 {
      width: 110px; /* ความกว้างของคอลัมน์ 3 */
      border-right: 1px solid #e3e7e7; /* เส้นกรอบด้านขวาของแต่ละเซล */
  }

สิ่งที่ต้องคำนึงถึงในการกำหนดขนาดของตาราง #table ก็คือ ขนาดรวมของตารางจะเท่ากับ ขนาดของแต่ละเซล รวมกับ padding และ เส้นขอบ